<template>
  <view class="my-islogin">
    <view class="header">
      <view class="avatar-wrapper">
        <image
          src="../../static/images/my-islogin/avatar.png"
          class="img"
        ></image>
        <view class="txt"> 立即登录 </view>
      </view>
    </view>
    <view class="sign">
      <view class="left">
        <view class="icon"></view>
        <view class="left-name">我的签名</view>
      </view>
      <view class="right">
        <view class="right-txt">设置签名</view>
        <u-icon name="arrow-right" color="#b9bdcd" size="20"></u-icon>
      </view>
    </view>
    <view class="menus">
      <view class="sign menu">
        <view class="left">
          <view class="icon info"></view>
          <view class="left-name">帮助与反馈</view>
        </view>
        <view class="right">
          <!-- <view class="right-txt">设置签名</view> -->
          <u-icon name="arrow-right" color="#b9bdcd" size="20"></u-icon>
        </view>
      </view>
      <view class="sign menu">
        <view class="left">
          <view class="icon zizhi"></view>
          <view class="left-name">我们的资质</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" color="#b9bdcd" size="20"></u-icon>
        </view>
      </view>
      <view class="sign menu">
        <view class="left">
          <view class="icon privacy"></view>
          <view class="left-name">隐私政策</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" color="#b9bdcd" size="20"></u-icon>
        </view>
      </view>
      <view class="sign menu">
        <view class="left">
          <view class="icon setting"></view>
          <view class="left-name">设置</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" color="#b9bdcd" size="20"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  onLoad() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
@function rpx($num) {
  @return $num + rpx;
}
page {
  background-color: #fafafa;
  font-size: rpx(30);
}
.header {
  width: 100%;
  height: rpx(350);
  background-color: #fe9d3b;
  box-sizing: border-box;
  padding-left: rpx(60);
  padding-top: rpx(60);
  .avatar-wrapper {
    display: flex;
    align-items: center;
    .img {
      width: rpx(125);
      height: rpx(125);
    }

    .txt {
      padding-left: rpx(44);
      color: #fff;
      font-size: rpx(38);
    }
  }
}
.sign,
.menu {
  width: rpx(673);
  height: rpx(125);
  background-color: #fff;
  border-radius: rpx(20);
  margin: rpx(-60) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    align-items: center;
    padding-left: rpx(60);
    .icon {
      width: rpx(50);
      height: rpx(50);
      background: url('../../static/images/my-islogin/sign.png') no-repeat;
      background-size: 100% 100%;
      &.info {
        background: url('../../static/images/my-islogin/info.png') no-repeat;
        background-size: 100% 100%;
      }
      &.setting {
        background: url('../../static/images/my-islogin/setting.png') no-repeat;
        background-size: 100% 100%;
      }
      &.zizhi {
        background: url('../../static/images/my-islogin/zizhi.png') no-repeat;
        background-size: 100% 100%;
      }
      &.privacy {
        background: url('../../static/images/my-islogin/privacy.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    .left-name {
      font-size: rpx(38);
      padding-left: rpx(20);
    }
  }

  .right {
    padding-right: rpx(40);
    display: flex;
    align-items: center;
    .right-txt {
      font-size: rpx(20);
      color: #ff5733;
      margin-right: rpx(20);
    }
  }
}
.menus {
  margin-top: rpx(20);
  padding: rpx(40) 0;
  border: 1px solid transparent;

  .menu {
    margin: 0 auto;
  }
}
</style>
